<template>
  <el-form :model="searchData" inline>
    <el-form-item label="关键字" props="keyWords">
      <el-input v-model="searchData.keyWords" />
    </el-form-item>
    <el-form-item label="日期" props="timeRange">
      <el-date-picker
        v-model="searchData.timeRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="YYYY-MM-DD"
        size="small"
      />
    </el-form-item>
    <el-form-item>
      <el-button @click="onSearch" :icon="Search" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
const searchData = reactive({
  keyWords: "",
  timeRange: [],
});
const emit = defineEmits(["search"]);
const onSearch = () => {
  emit("search", {
    keyWords: searchData.keyWords,
    start: searchData.timeRange[0] || "",
    end: searchData.timeRange[1] || "",
  });
};
</script>

<style scoped></style>
